<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>悠哈专用地图</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.4.3&key=668a4141ef1959550bc985edd6a048f9&plugin=AMap.PolyEditor,AMap.CircleEditor"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<style>
    #show-points { display: none;
        width: 100%;
        z-index: 9999;
        position: absolute;
        background: white;
    }
    #pointSet{ height: 200px; width: 97%; }  
    #panel {
        position: absolute;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
    } 
    #search-text{ width: 10em; }
</style>
<div id="container"></div>
<div id="panel"></div>
<div class="button-group">
  <input type="button" class="button" value="开始编辑" onClick="editor.startEditPolygon()"/>
  <input type="button" class="button" value="结束编辑" onClick="editor.closeEditPolygon()"/>
  <input type="button" class="button" value="坐标集" onClick="editor.togglePoints()"/>
  <input type="text" value="" id="search-text" placeholder="搜索" onClick="editor.closeEditPolygon()"/>
  <input type="checkbox" id="search-in"  />圈内
  <input type="button" class="button" value="搜索" onClick="editor.search()"/>
</div>
<div id="show-points">
    <input type="button" class="button" value="x" onClick="editor.hidePoints()" style=" float:right;"/>
    <textarea id="pointSet"></textarea>
</div>
<script>
    var pointsStr = '109.449712,24.296303,109.446525,24.300284,109.447929,24.304109,109.451463,24.305757,109.453946,24.308931,109.45644,24.306169,109.459664,24.303896,109.461657,24.310293,109.4694,24.308517,109.465263,24.311128,109.466039,24.318081,109.461913,24.320732,109.458176,24.323602,109.457874,24.326327,109.457486,24.329209,109.455923,24.329357,109.453694,24.329059,109.45258,24.329896,109.452362,24.333518,109.447445,24.337199,109.45184,24.338544,109.451386,24.339771,109.447032,24.352685,109.439104,24.357812,109.438557,24.361219,109.424956,24.361866,109.421588,24.365142,109.419422,24.371857,109.417492,24.376832,109.413287,24.37762,109.410756,24.381573,109.408006,24.381234,109.405257,24.381365,109.402076,24.378733,109.397436,24.375788,109.394212,24.375619,109.392635,24.3674,109.392109,24.361086,109.38432,24.357527,109.375737,24.340202,109.363163,24.33984,109.364064,24.327058,109.365202,24.315563,109.362251,24.314196,109.361275,24.312046,109.36327,24.310757,109.364708,24.307905,109.377025,24.296762,109.372588,24.287415,109.380319,24.281367,109.376977,24.274145,109.372226,24.270576,109.373215,24.268537,109.373742,24.26717,109.380856,24.269305,109.380957,24.265619,109.393614,24.265827,109.393592,24.260298,109.399406,24.262201,109.407249,24.272852,109.425368,24.275562,109.434354,24.278833,109.434664,24.277216,109.436117,24.27761,109.437409,24.274464,109.436469,24.271761,109.436408,24.269077,109.442948,24.268906,109.449487,24.269126,109.446214,24.277507,109.441531,24.285531,109.448585,24.28935';
    var editorTool, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [109.4117430000,24.3194860000],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });
    //在地图上绘制折线
    var editor={};
    editor._polygon=(function(){
        arr = function(){
            var pArr = pointsStr.split(',');
            var retArr = [];
            var point = [];
            pArr.forEach(function(e,i) {
                if(i%2==0){
                    point = [];
                    point.push(e);
                }else{
                    point.push(e);
                    retArr.push(point);
                }
            }, this);
            return retArr;
        }();
        
        return new AMap.Polygon({
            map: map,
            path: arr,
            strokeColor: "#0000FF",
            strokeOpacity: 0.9,
            strokeWeight: 2,
            fillColor: "#1791fc",
            fillOpacity: 0.05,
        });
    })();
    map.setFitView();
    editor._polygonEditor= new AMap.PolyEditor(map, editor._polygon);

    editor.startEditPolygon=function(){
        editor._polygonEditor.open();
    }
    editor.closeEditPolygon=function(){
        editor._polygonEditor.close();
    }
    editor.togglePoints=function(){
        var pointDiv = document.getElementById('show-points');
        var display = pointDiv.style.display;
        if(display=='' || display=='none'){
            pointDiv.style.display = 'block';
            document.getElementById('pointSet').value = editor._polygon.F.path.toString();
        }else{
            pointDiv.style.display = 'none';
        }
    }
    editor.hidePoints=function(){
        document.getElementById('show-points').style.display = 'none';
    }

    //editor.startEditPolygon();

    AMap.service(["AMap.PlaceSearch"], function() {
        placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            pageSize: 4,
            //pageIndex: 1,
            city: "0772", //城市
            map: map,
            //panel: "panel"
        });
        
    });

    editor.search=function(){

        //关键字查询
        var kw = document.getElementById('search-text').value;
        var is_in = document.getElementById("search-in").checked;
        if(is_in){
            placeSearch.searchInBounds(kw, editor._polygon);
        }else{
            placeSearch.search(kw);
        }

    }

</script>
</body>
</html>